<template>
  <div>
      <!-- 自定义指令的高级用法 -->
      <input type="text"> <br>
      <input type="text"> <br>

      <!-- 系统的autofocus属性，可以让元素自动获得焦点 -->
      <!-- 自制 v-focus指令，实现相同的操作 -->
      <input type="text" v-focus> <br>
      <input type="text"> <br>
  </div>
</template>

<script>
  export default {
    directives:{
      // 指令的精确配置模式： 指令名：{配置项...}
      focus:{
        // inserted:嵌入；指令所在的元素 嵌入到 页面中展示出来
        // dom元素的生命周期：内存中创建->渲染到页面->更新->销毁
        // 让元素获得焦点在那个周期？ 必须是元素呈现到页面上以后
        // inserted：会在dom元素 呈现到页面上后 自动触发
        inserted(el){
          el.focus
        },
      },
      // 词写法：默认是在dom元素 内存创建阶段触发，回去焦点会失败
      // focus(el){
      //   // this.focus():元素自带的写法，调用后悔获得焦点
      //   el.focus()
      // }
    }
  }
</script>

<style lang="scss" scoped>

</style>